<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/good.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h2 class="text-center mb-4">商品管理</h2>
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>商品名</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>是否上架</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="goodsTableBody"></tbody>
        </table>
    </div>

    <!-- 修改商品的模态框 -->
    <div class="modal fade" id="editModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">修改商品</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="editForm">
                        <input type="hidden" id="editGid">
                        <div class="mb-3">
                            <label class="form-label">商品名称</label>
                            <input type="text" class="form-control" id="editGname" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">数量</label>
                            <input type="number" class="form-control" id="editGnum" required min="0">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">单价</label>
                            <input type="number" step="0.01" class="form-control" id="editGprice" required min="0">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">状态</label>
                            <select class="form-select" id="editGstatus">
                                <option value="true">上架</option>
                                <option value="false">下架</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveEdit()">保存</button>
                </div>
            </div>
        </div>
    </div>

<!--引入js-->
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/goods.js"></script>
</body>
</html>